<?php
/**
 * Created by PhpStorm.
 * User: dingding
 * Date: 2017/8/4
 * Time: 9:28
 */?>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入 bootstrap 样式 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrapValidator.css">
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <!-- 引入 bootstrap 库 -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrapValidator.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>


    <title>应用注册</title>
    <link rel="stylesheet" href="css/global.css" />

</head>
<body style="background-image: url(img/bg.png)">

<div style="padding:20px">

    <form class="form-horizontal" role="form" id="registerForm" action="controller/registerCtrl.php" >
        <div class="form-group has-feedback">
            <label for="username" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
            </div>
        </div>
        <div class="form-group has-feedback">
            <label for="psd" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="psd" name="psd" placeholder="请输入密码">
            </div>
        </div>
        <div class="form-group has-feedback">
            <label for="pasagain" class="col-sm-2 control-label">确认密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="psdagain" name="psdagain" placeholder="请再次确认密码">
            </div>
        </div>
        <div class="form-group has-feedback">
            <label for="phone" class="col-sm-2 control-label">手机号码</label>
            <div class="col-sm-10">
                <input type="number" class="form-control" id="phone" name="phone" placeholder="请输入手机号">
            </div>
        </div>

        <div style="margin-bottom: 20px; font-size: 16px;font-weight: bold" >
            <label class="radio-inline">
                <input type="radio" name="userTag" id="tag1" value="1" checked> 软工实验室
            </label>
            <label class="radio-inline">
                <input type="radio" name="userTag" id="tag2"  value="0">非软工实验室
            </label>
        </div>

        <div class="form-group" style="text-align: center">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary" ">注册</button>
            </div>
        </div>
    </form>

</div>


</body>


<script type="text/javascript">
    $(function(){
        $('#registerForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username:{
                    messsage:'用户名验证失败',
                    validators:{
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 3,
                            max: 18,
                            message: '用户名长度必须在3到18位之间'
                        }
                    }
                },
                psd:{
                    validators:{
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 5,
                            max: 12,
                            message: '密码长度必须在5到12位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '用户名只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                psdagain:{
                    validators:{
                        notEmpty: {
                            message: '确认密码不能为空'
                        },
                        identical: {
                            field: 'psd',
                            message: '确认密码不一致'
                        }
                    }
                },
                phone:{
                    validators:{
                        notEmpty: {
                            message: '手机号不能为空'
                        },
                        regexp: {
                            regexp: /^[1][3,4,5,7,8][0-9]{9}$/,
                            message: '手机号格式不正确'
                        }
                    }
                }
            }
        }).on('success.form.bv', function(e) {
            // 终止重复提交
            e.preventDefault();

            var flag2 = $('#registerForm').data("bootstrapValidator").isValid();
            if(flag2){
                var action = $("#registerForm").attr('action');
                var userTag = 0;
                if($('#tag1').attr('checked')=="checked"){
                    userTag = 1;
                }
                var form_data = {
                    username: $("#username").val(),
                    password: $("#psd").val(),
                    userId: getUrlParam("userId"),
                    phone:  $("#phone").val(),
                    userTag:  userTag,
                    is_ajax: 1
                };
//                alert(JSON.stringify(form_data));

                $.ajax({
                    type: "POST",
                    url: action,
                    data: form_data,
                    success: function(response){
                        var result = response.trim();
                        if(result == "success"){
                            alert("注册成功！");
                        } else if(result == "exist"){
                            alert("用户名/微信ID已存在！");
                            $('#registerForm').bootstrapValidator('disableSubmitButtons', false);
                        } else {
                            alert("后台出错，请稍后再试");
                            $('#registerForm').bootstrapValidator('disableSubmitButtons', false);
                        }
                    }
                });

            }
        });
    });

    //获取url中的userId参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null)
            return unescape(r[2]);
        return null; //返回参数值
    }

</script>


</html>
